<script setup>
    import { onMounted, ref } from 'vue';
    const roles = ref([
        {
            roleId:1,
            roleName:'dada',
            roleDes:'dasdas'
        },{
            roleId:2,
            roleName:'dadasda',
            roleDes:'dasdas'
        },{
            roleId:3,
            roleName:'dadda',
            roleDes:'dasdas'
        },
    ])

    const drawer = ref(false);
    const treeRef = ref()
    const roleId = ref()
    const showDrawer = async(row)=>{
        roleId.value = row.roleId
        let result = await permissionListByRoleIdService(row.roleId)
        console.log("数据"+result.data.data)
        if(treeRef.value){
            treeRef.value.setCheckedKeys(result.data.data) 
        }
        drawer.value = true
    }

    import { roleListService,permissionListByRoleIdService,rolePermissionUpdateService,roleDeleteService,roleUpdateService,roleDeleteByRoleIdService} from '../../api/Role';
    //获取角色数据列表
    const roleList = async()=>{
        let result = await roleListService()
        roles.value = result.data.data
    }
    


    //权限分配树形控件
    const defaultProps = {
        children: 'children',
        label: 'label',
        disabled: 'disabled',
    }

    //加载所有权限数据
    import { permissionListService } from '../../api/Permission';
    const permissionTreeData = ref([{}]);
    const permissionList = async()=>{
        let result = await permissionListService()
        permissionTreeData.value = result.data.data
    }

    //提交权限方法

    const submitPermissions = async()=>{
        const checkedKeys = treeRef.value.getCheckedKeys()
        let result = await rolePermissionUpdateService(roleId.value,checkedKeys)
        ElMessage.success(result.data.message?result.data.message:"修改成功")
        drawer.value = false
    }
    

    onMounted(()=>{
        permissionList()
        roleList()
    })
    //角色数据模型
    const roleModel = ref({})


    //控制修改弹窗出现
    const centerDialogVisible = ref(false)
    const showUpdate = (row)=>{
        roleModel.value.roleId = row.roleId
        roleModel.value.roleName = row.roleName
        roleModel.value.roleDes = row.roleDes
        centerDialogVisible.value = true
    }

    import { ElMessage,ElMessageBox  } from 'element-plus';
    //提交角色修改数据
    const roleUpdate = async()=>{
        await roleUpdateService(roleModel.value.roleId,roleModel.value)
        roleList()
        centerDialogVisible.value = false

    }

    const roleClean = ()=>{
        roleModel.value.roleId = null
        roleModel.value.roleName = ''
        roleModel.value.roleDes = ''
    }

    //批量删除
    const selectedIds = ref([null,null]);
    const handleSelectionChange = (selection)=>{
        selectedIds.value = selection.map(item => item.roleId)
        console.log(selectedIds.value)
    }

    const roleDlete = async()=>{
        ElMessageBox.confirm(
            '你确定要删除吗',
            '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
        )
        .then(async() => {
            let result =  await roleDeleteService(selectedIds.value)
            roleList()
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        })
        .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
        })
    
        
    }

    //单个删除
    const deleteById = async(row)=>{
        let result = await roleDeleteByRoleIdService(row.roleId)
        ElMessage.success(result.data.message?result.data.message:"删除成功")
        roleList()
    }
</script>
<template>
    <div class="container">
        <el-card style="max-width: 100%;height: 100%;">
        
            <div class="button">
                <el-form :inline="true" :model="queryUser" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="primary">新增角色</el-button>
                    </el-form-item>
                        <el-form-item>
                        <el-button type="danger" @click="roleDlete">批量删除</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 数据展示区域 -->
            <div class="content">
                <el-table :data="roles" style="width: 100%" @selection-change = "handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="roleId" align="center" label="角色编号" width="300"/>
                    <el-table-column property="roleName" align="center" label="角色名称" width="300" />
                    <el-table-column property="roleDes" align="center" label="角色描述" width="300" />
                     <el-table-column align="center" fixed="right" label="操作"  width="360">
                        <template #default="scope">
                        <el-button type="primary" size="small" @click="showUpdate(scope.row)">修改</el-button>
                        <el-button type="danger" size="small" @click="deleteById(scope.row)">删除</el-button>
                         <el-button type="warning" size="small" @click="showDrawer(scope.row)">分配权限</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                  <el-drawer v-model="drawer" title="权限分配" :with-header="false">
                    <div class="assign-permission-content">
                        <el-tree
                            style="max-width: 600px"
                            :data="permissionTreeData"
                            :props="defaultProps"
                            show-checkbox
                            default-expand-all
                            node-key="id"
                            ref="treeRef"
                        />
                        <div class="drawer-footer">
                            <el-button @click="drawer = false">取消</el-button>
                            <el-button type="primary" @click="submitPermissions">保存权限</el-button>
                        </div>
                    </div>
                    
                </el-drawer>
            </div>

            <!-- 修改弹窗 -->
            <el-dialog v-model="centerDialogVisible" title="角色修改" @close="roleClean()" width="500" center>
                <el-form :model="roleModel" label-width="auto" style="max-width: 600px">
                     <el-form-item label="角色名">
                        <el-input v-model="roleModel.roleName" />
                    </el-form-item>
                    <el-form-item label="角色描述">
                        <el-input v-model="roleModel.roleDes" />
                    </el-form-item>
                </el-form>
                <template #footer>
                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="roleUpdate()">
                    确认
                    </el-button>
                </div>
                </template>
            </el-dialog>
        </el-card>
    </div>
    
    
</template>
<style lang="css" scoped>
    .container{
        padding: 20px;
    }

    .button{
        border-bottom: 1px solid #ccc;
    }

    .content{
        margin-top:20px;
    }

    .page{
        margin-top: 20px;
    }
    .assign-permission-content {
        padding: 20px;
    }
    </style>